<template>
  <section class="singer">
    <scroll class="singers_scroll"   :data="singers">
      <ul>
        <li class="singer_group" v-for="value in singers">
          <h2>{{value.title}}</h2>
          <ul>
            <li class="singer_group_item" v-for="item in value.items">
              <img :src='"https://y.gtimg.cn/music/photo_new/T001R150x150M000"+item.imgId+".jpg?max_age=2592000"' alt="" class="image">
              <span class="name">{{item.name}}</span>
            </li>
          </ul>
        </li>
      </ul>
    </scroll>
    <div class="singer_right">
      <ul>
        <li v-for="value in _rightList">{{value}}</li>
      </ul>
    </div>
  </section>
</template>

<style scoped lang='less'>
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  .singer{
    height:100%;
    width:100%;
    position: fixed;
    top:1.76rem;
    bottom: 0;
    .singers_scroll{
      position: relative;
      width:100%;
      height:100%;
      overflow: hidden;
      background-color: #222;
      .singer_group{
        padding-bottom: .6rem;
        h2{
          height:0.6rem;
          line-height:0.6rem;
          padding-left: 0.4rem;
          font-size: 0.24rem;
          color: #aaa;
          background-color: #333;
        }
        .singer_group_item{
          display: flex;
          align-items: center;
          padding: 0.4rem 0 0 0.6rem;
          img{
            height:1rem;
            width:1rem;
            border-radius: 50%;
          }
          span{
            margin-left: 0.4rem;
            font-size: 0.28rem;
            color: #aaa;
          }
        }
      }
    }
    .singer_right{
      position: absolute;
      top: 1.5rem;
      right: 0;
      height:100%;
      ul{
        height:100%;
        li{
          font-size: .24rem;
          text-align: center;
          overflow: hidden;
          line-height:0.4rem;
          height:0.4rem;
          width:0.4rem;
          color: #aaa;
          background-color: #222;
        }
      }
    }
  }
  
</style>

<script>
  //https://y.gtimg.cn/music/photo_new/T001R150x150M000002J4UUk29y8BY.jpg?max_age=2592000
  //https://y.gtimg.cn/music/photo_new/T001R150x150M0000025NhlN2yWrP4.jpg?max_age=2592000
  import Request from '../../api/request'
  import scroll from '../base/scroll.vue'
  
  const Hot_Name = '热门'
  const Hot_Index = 10
  export default {
    data () {
      return {
        singers: {},
        hotName: Hot_Name
      }
    },
    created () {
      this.resSingers()
    },
    methods: {
      resSingers () {
        Request.getSinger().then((res) => {
          if (res.code === 0) {
            console.log('res=>', res)
            this.singers = res.data.list
            console.log(this.singers)
            this._normalDataList(this.singers)
          }
        })
      },
      //数据格式化
      _normalDataList (list) {
        let map = {
          '#': {
            title: Hot_Name,
            items: []
          }
        }
        list.forEach((item, index) => {
          if (index < Hot_Index) {
            map['#'].items.push({
              'id': item.Fsinger_id,
              'imgId': item.Fsinger_mid,
              'name': item.Fsinger_name
            })
          }
          const key = item.Findex
          if (!map[key] && !/\d/.test(key)) {
            map[key] = {
              title: key,
              items: []
            }
          }
          console.log(/\D/.test(key))
          //https://y.gtimg.cn/music/photo_new/T001R300x300M000004AlfUb0cVkN1.jpg?max_age=2592000
          if(/\d/.test(key)){
            return false;
          }else{
            map[key].items.push({
              'id': item.Fsinger_id,
              'imgId': item.Fsinger_mid,
              'name': item.Fsinger_name
            })
          }
        })
        console.log("map=>",map)
        this.singers = map;
        console.log(this.singers)
      },
    },
    computed:{
      //右侧列表
      _rightList(){
        const rList = [];
        Object.values(this.singers).forEach((value)=>{
          rList.push(value.title)
        })
        rList.sort().splice(-1,1)
        rList.unshift("热门");
        return rList
      }
    },
    components: {
      scroll
    }
  }
</script>
